<%@ include file="/common/taglibs.jsp"%>
<%@ page language="java" errorPage="/error.jsp" pageEncoding="UTF-8" contentType="text/html;charset=utf-8" %>
<head>
    <title><fmt:message key="bookDetail.title"/></title>
    <meta name="heading" content="<fmt:message key='bookDetail.heading'/>"/>
	<link href="<c:url value='/scripts/filetree/style.css'/>" rel="stylesheet" type="text/css" media="all" />
	<script type="text/javascript" src="<c:url value='/scripts/filetree/script.js'/>"></script>
	<link href="<c:url value='/scripts/filetree/jqueryFileTree.css'/>" rel="stylesheet" type="text/css" media="all" />
	<script type="text/javascript" src="<c:url value='/scripts/filetree/jqueryFileTree.js'/>"></script>
</head>

<c:set var="delObject" scope="request"><fmt:message key="bookList.book"/></c:set>
<script type="text/javascript">var msgDelConfirm =
   "<fmt:message key="delete.confirm"><fmt:param value="${delObject}"/></fmt:message>";
</script>

<div class="span2">
    <h2><fmt:message key="bookDetail.heading"/></h2>
    <fmt:message key="bookDetail.message"/>
</div>

<div class="span7">
    <s:form id="bookForm" action="saveBook" method="post" validate="true" cssClass="well form-horizontal">
        <s:include value="/WEB-INF/pages/common/fileTree.jsp"/>
            <s:hidden key="book.id"/>
        <s:textfield key="book.name" required="true" maxlength="50" />
        <fieldset class="control-group">
            <label class="control-label" for="bookForm_book_fileName" ><span class="required">*</span>  <s:text name="book.fileName"/>:</label>
            <div class="controls">
                <input type="text" name="book.fileName" size="40" maxlength="255" value="<s:property value='book.fileName'/>" id="bookForm_book_fileName" readonly="readonly"/>
                <a href="#" class="topopup"><button type="button" id="book.bookForm_book_fileName" class="btn">选择</button></a> 
            </div>
        </fieldset>

        <fieldset class="control-group">
            <label for="bookCategories" class="control-label"><fmt:message key="book.category"/></label>
            <div class="controls">
                <select id="book.categories" name="book.categories" multiple="multiple">
                    <s:iterator value="categories" var="category">
	                    <option value="<s:text name='#category.name'/>"
	                       <s:if test="%{book.categories.contains(#category.name)}">selected</s:if>>
	                       <s:else></s:else>
	                       <s:text name='#category.name'/></option>
                    </s:iterator>
                </select>
            </div>
        </fieldset>
        <fieldset class="control-group">
            <label class="control-label" for="bookForm_book_descriptionPic" >        <s:text name="book.descriptionPic"/>:</label>
            <div class="controls">
                <input type="text" name="book.descriptionPic" size="40" maxlength="255" 
                    value="<s:property value='book.descriptionPic'/>" id="bookForm_book_descriptionPic" readonly="readonly"/>
                <a href="#" class="topopup"><button type="button" id="pic.bookForm_book_descriptionPic" class="btn">选择</button></a> 
            </div>
        </fieldset>
		<fieldset class="control-group">
			<label class="control-label" for="bookForm_book_previewPic" >        <s:text name="book.previewPic"/>:</label>
			<div class="controls">
		       <input type="text" name="book.previewPic" maxlength="255" value="<s:property value='book.previewPic'/>" id="bookForm_book_previewPic" readonly="readonly"/>
		       <a href="#" class="topopup"><button type="button" id="pic.bookForm_book_previewPic" class="btn">选择</button></a> 
		    </div>
		</fieldset>
        <s:textfield key="book.presenter" required="false" maxlength="255" />
        <s:textfield key="book.origination" required="false" maxlength="255" />
        <s:textfield key="book.presentDate" required="false" maxlength="255" size="11" title="date" datepicker="true"/>
        <s:textarea key="book.descriptioin" required="false" maxlength="255" />
        
        <s:textfield key="book.length" required="false" maxlength="255" />
        <s:textfield key="book.size" required="true" maxlength="255" />
        <s:textfield key="book.price" required="true" maxlength="255" />
        <s:textfield key="book.priceInSales" required="false" maxlength="255" />

        <fieldset class="control-group">
            <label class="control-label"><fmt:message key="book.status"/></label>
            <div class="controls">
                <s:iterator value="@com.greatmay.model.ProductStatus@values()" var="ps">
                <label class="radio inline">
                        <s:radio theme="simple" key="book.status" list="#{#ps.toString():description}"/>
                </label>
                </s:iterator>
            </div>
        </fieldset>
        <div id="actions" class="form-actions">
            <s:submit type="button" cssClass="btn btn-primary" method="save" key="button.save" theme="simple">
                <i class="icon-ok icon-white"></i> <fmt:message key="button.save"/>
            </s:submit>
            <c:if test="${not empty book.id}">
                <s:submit type="button" cssClass="btn btn-warning" method="delete" key="button.delete"
                    onclick="return confirmMessage(msgDelConfirm)" theme="simple">
                    <i class="icon-trash icon-white"></i> <fmt:message key="button.delete"/>
                </s:submit>
            </c:if>
            <s:submit type="button" cssClass="btn" method="cancel" key="button.cancel" theme="simple">
                <i class="icon-remove"></i> <fmt:message key="button.cancel"/>
            </s:submit>
        </div>
    </s:form>
</div>

<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/scripts/datepicker/css/datepicker.css'/>" />
<script type="text/javascript" src="<c:url value='/scripts/datepicker/js/bootstrap-datepicker.js'/>"></script>
<c:if test="${pageContext.request.locale.language != 'en'}">
<script type="text/javascript" src="<c:url value='/scripts/datepicker/js/locales/bootstrap-datepicker.${pageContext.request.locale.language}.js'/>"></script>
</c:if>
<script type="text/javascript">
    $(document).ready(function() {
        $("input[type='text']:visible:enabled:first", document.forms['bookForm']).focus();
        $('.input-append.date').datepicker({format: "<fmt:message key='calendar.format'/>", weekStart: "<fmt:message key='calendar.weekstart'/>", language: '${pageContext.request.locale.language}'});
    });
</script>
